<?php $this->action("index","more","header");?>
	<div id="content">
		<div class="main">
			<h1>&nbsp;</h1>
			<div id="sp-setting" class="mod">
				<div class="hd">
					<ul class="type-nav" style="text-align: left;">
     					<li><a href="<?php echo $this->getUrl("index","admin","info",array("siteid"=>$site_E->id));?>">资料</a></li>
					    <li><a href="<?php echo $this->getUrl("index","admin","icon",array("siteid"=>$site_E->id));?>">图标</a></li>
					    <li><a href="<?php echo $this->getUrl("index","admin","room",array("siteid"=>$site_E->id));?>">房间</a></li>
					    <li  class="on"><a href="<?php echo $this->getUrl("index","admin","design",array("siteid"=>$site_E->id));?>">设计</a></li>
					</ul>
   				 </div>
				    <div class="bd">
				        <h2>请选择一个主题</h2>
				        <ul class="list-s sys-bg-list">
							<li id="bg-1">
							<img <?php if($theme_id == 1) echo 'class="selected"';?>  src="/pics/site/theme/1/thumbnail.png" alt="" />
							</li>
							<li id="bg-2">
							<img <?php if($theme_id == 2) echo 'class="selected"';?> src="/pics/site/theme/2/thumbnail.png" alt="" />
							</li>
							<li id="bg-3">
							<img <?php if($theme_id == 3) echo 'class="selected"';?> src="/pics/site/theme/3/thumbnail.png" alt="" />
							</li>
							<li id="bg-4">
							<img <?php if($theme_id == 4) echo 'class="selected"';?> src="/pics/site/theme/4/thumbnail.png" alt="" />
							</li>
							<li id="bg-5">
							<img <?php if($theme_id == 5) echo 'class="selected"';?> src="/pics/site/theme/5/thumbnail.png" alt="" />
							</li>
							<li id="bg-6">
							<img <?php if($theme_id == 6) echo 'class="selected"';?> src="/pics/site/theme/6/thumbnail.png" alt="" />
							</li>
							<li id="bg-7">
							<img <?php if($theme_id == 7) echo 'class="selected"';?> src="/pics/site/theme/7/thumbnail.png" alt="" />
							</li>
							<li id="bg-8">
							<img <?php if($theme_id == 8) echo 'class="selected"';?> src="/pics/site/theme/8/thumbnail.png" alt="" />
							</li>
							<li id="bg-9">
							<img <?php if($theme_id == 9) echo 'class="selected"';?> src="/pics/site/theme/9/thumbnail.png" alt="" />
							</li>
							<li id="bg-10">
							<img <?php if($theme_id == 10) echo 'class="selected"';?> src="/pics/site/theme/10/thumbnail.png" alt="" />
							</li>
							<li id="bg-11">
							<img <?php if($theme_id == 11) echo 'class="selected"';?> src="/pics/site/theme/11/thumbnail.png" alt="" />
							</li>
							<li id="bg-12">
							<img <?php if($theme_id == 12) echo 'class="selected"';?> src="/pics/site/theme/12/thumbnail.png" alt="" />
							</li>
							<li id="bg-13">
							<img <?php if($theme_id == 13) echo 'class="selected"';?> src="/pics/site/theme/13/thumbnail.png" alt="" />
							</li>
							<li id="bg-14">
							<img <?php if($theme_id == 14) echo 'class="selected"';?> src="/pics/site/theme/14/thumbnail.png" alt="" />
							</li>
							<li id="bg-15">
							<img <?php if($theme_id == 15) echo 'class="selected"';?> src="/pics/site/theme/15/thumbnail.png" alt="" />
							</li>
							<li id="bg-16">
							<img <?php if($theme_id == 16) echo 'class="selected"';?> src="/pics/site/theme/16/thumbnail.png" alt="" />
							</li>        
						</ul>
				        <div class="sp-design-opt">
				            <input type="button" hideFocus="hidefocus" name="bg-modify" class="btn-large" value="修改背景图" />
				            <input type="button" hideFocus="hidefocus" name="theme-modify" class="btn-large" value="修改主题颜色" />
				            <form id="bg-upload-form" action="/admin_background/<?php echo $site_E->id;?>" method="post" enctype="multipart/form-data">
				          	    <div style="display:none;"><input type="hidden" name="update" value="1"/></div>
				                <input name="picfile" id="sp-bg-upload" type="file" />
				                <label for="sp-bg-upload">背景图可以上传的 JPG, GIF, PNG 文件</label>
				            </form>
				
				            <div id="sp-bg-modify" class="mod-setting"> 
				                <div class="sp-bg-preview">
				                    <span class="sp-bg-show selected" title="应用背景图">
				                    <img class="sys-bg" src="<?php if(empty($background)) echo "/pics/site/theme/$theme_id/thumbnail.png"; else echo $background;?>" />
				                    </span>
				                    <span class="sp-bg-none" title="取消背景图"></span>
				
				                    <div class="sp-bg-sel">
				                        
				                        <input id="pos-left" type="radio" name="sp-bg" value="left" >
				                        <label for="pos-left">居左</label>
				
				                        <input id="pos-center" type="radio" name="sp-bg" value="center" >
				                        <label for="pos-center">居中</label>
				                        <input id="pos-right" type="radio" name="sp-bg" value="right" >
				                        <label for="pos-right">居右</label>
				                        <br />
				                        <input id="sp-bg-repeat" type="checkbox" />
				                        <label for="sp-bg-repeat">平铺背景图片</label>
				                        <br />
				                        <input id="sp_nav_transparent" type="checkbox"  <?php if($sp_nav_transparent){ echo "checked";}?>/>
				                        <label for="sp-bg-transparent">不显示横幅背景</label>
				                        
				                        
				                        <br />
				                        <span id="sp-body-fixed"  <?php if(!$bgfixed){ echo 'style="display:none;"';}?>>
				                        <input id="sp-bg-fixed" type="checkbox" <?php if($bgfixed){ echo "checked";}?>/>
				                        <label for="sp-bg-fixed">固定/滚动</label>
				                        </span>
				                    </div>
				                </div>
				            </div>
				            <div id="sp-theme-modify" class="mod-setting">
				                <div class="sp-theme-sel">
				                    <ul>
				                        <li>
				
				                            <span class="kind">页面背景</span>
				                            <a href="/" id="theme-bg" hidefocus="true"><em>▼</em></a>
				                        </li>
				                        <li>
				                            <span class="kind">顶部横幅背景</span>
				                            <a href="/" id="theme-banner" hidefocus="true"><em>▼</em></a>
				                        </li>
				
				                        <li>
				                            <span class="kind">顶部标签背景</span>
				                            <a href="/" id="theme-tag-bg" hidefocus="true"><em>▼</em></a>
				                        </li>
				                        <li>
				                            <span class="kind">顶部标签文字</span>
				                            <a href="/" id="theme-tag-link" hidefocus="true"><em>▼</em></a>
				
				                        </li>
				                        <li>
				                            <span class="kind">页面链接</span>
				                            <a href="/" id="theme-link" hidefocus="true"><em>▼</em></a>
				                        </li>
				                         <li>
				                            <span class="kind">顶部横幅文字</span>
				                            <a href="/" id="theme-logo" hidefocus="true"><em>▼</em></a>
				                        </li>
				                    </ul>
				                </div> 
				            </div>
				
				            <div class="sp-setting-btn">
				                <span id="submit-theme" class="bn-flat-hot" href=""><input type="submit" value="保存修改" hidefocus="1" /></span>
				                <a id="cancel-theme" href="#">取消</a>
				            </div>
				        </div>
				    </div>
			</div>
<script>
    Do.add('colorpicker-css', {path: '/style/css/lib/colorpicker.css', type: 'css'});
    Do.add('colorpicker', {path: '/style/js/lib/colorpicker.js', type: 'js', requires: ['colorpicker-css']});
    Do.add('effects', {path: '/style/js/lib/jquery-ui-effects-core.min.js', type: 'js'});
    Do.add('iframe-post-form-css', {path: '/style/css/lib/iframe-post-form.css', type: 'css'});
    Do.add('iframe-post-form', {path: '/style/js/lib/iframe-post-form.min.js', type: 'js', requires: ['iframe-post-form-css']});
    Do('colorpicker', 'effects', 'iframe-post-form', function () {
        
        var self,
        	bgPic = '<?php echo $background;?>',
            bgVer = '',
            currId = '',
            currColor = '',
            bgRepeat = '',
            oBg = $('.bg'),
            designStatus = {
                hasBgPos: false,
                hasBgRepeat: false,
                hasCustomColor: false
            },
            oBody = $('body');
            oFiexd = $('#sp-bg-fixed'),
            oSwither = $('.btn-large'),
            oBgNone = $('.sp-bg-none'),
            oUpload = $('#sp-bg-upload'),
            oSubmit = $('#submit-theme'),
            oBgShow = $('.sp-bg-show'),
            oThemeCSS = $('#sys-theme'),
            oBgRepeat = $('#sp-bg-repeat'),
            oBgCancel = $('#cancel-theme'),
            oThumbnail = $('.sys-bg-list li'),
            oInputAll = $('.sp-bg-sel input'),
            oBgPos = $('input[name="sp-bg"]'),
            oInitTheme = $('#init-theme'),
            oCustomTheme = $('#custom-theme'),
            oFormUpload = $('#bg-upload-form'),
            oColorSelector = $('.sp-theme-sel a'),
            siteId = $('body').attr('id'),
            css_tips = '#upload-tips',
            css_top_tips = '#top-tips',
            css_error_tips = '.error-tips',
            css_bn_active = 'btn-large-active',
            tmpl_upload_tips = '<span id="upload-tips">上传中，请稍候...</span>',
            tmpl_top_tips = '<div id="top-tips">你的最新设置已经被成功保存.</div>',
            tmpl_error_tips = '<span class="error-tips">文件大小不得超过800k</span>',
            roomId = $('body').attr('id'),
            postUrl = location.pathname,
            settingUrl = postUrl.split('/').slice(0, 3).join('/') + '/',
            rgb2hex = function (rgb) {
                if (!$.browser.msie) {
                    var hexDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'],
                        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
                        hex = function (x) {
                            return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
                        }
                    return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
                } else {
                    return rgb;
                }
            },
            getBgColor = function (o) {
                return rgb2hex(o.css('background-color'));
            },
            removeTips = function () {
                $(css_top_tips).slideUp(function () {
                    $(this).remove();
                })
            },
            initInput = function () {
                var posX = $.browser.msie ? oBg.css('background-positionX') : oBg.css('background-position').split(' ')[0];
                // init background repeat
                if (oBg.css('background-repeat') !== 'no-repeat') {
                    oBgRepeat.attr('checked', 'checked');
                } else {
                    oBgRepeat.attr('checked', '');
                }
                // init background position

                if (posX === '0%') {
                    $('#pos-left').attr('checked', 'checked');
                } else if (posX === '50%') {
                    $('#pos-center').attr('checked', 'checked');
                }
            };

        initInput();

        // ajax uploader
        oFormUpload.iframePostForm({
            post: function () {
                if (!$(css_tips).length) {
                    oUpload.after(tmpl_upload_tips);
                }
                $(css_error_tips).remove();
            },
            complete: function (bg) {
                var realJson = eval('(' + bg.match(/\{[^\}]+\}/)[0]  + ')'),
                    bgUrl = realJson.pic;

                // save bg version
                bgPic = realJson.pic;
                bgVer = realJson.ver;
                designStatus.hasBgVer = true;

                // remove uploading tips
                $(css_tips).remove();
                if (!realJson.error) {
                    oBgShow.html('<img src="' + bgUrl + '" />');
                    oBg.css({
                        'background-image': 'url(' + bgUrl + ')',
                        'background-position': 'left top',
                        'background-repeat': 'repeat'
                    });
                    $('#pos-left').attr('checked', 'checked');
                    oBgRepeat.attr('checked', 'checked');
                    designStatus.hasBgRepeat = true;

                    // remove system theme selected border
                    //oThumbnail.children('img').removeClass();
                    oBgNone.removeClass('selected');
                    oBgShow.addClass('selected');
                    oInputAll.attr('disabled', '');
                    //----------------------------------
					$('#sp-body-fixed').css('display','');
					
					 var ischecked = $('#sp-bg-fixed').is(':checked');
					 if(ischecked)
					 {
					  	oBody.css('background-image', 'url(' + bgUrl + ')');	
					 }
					//----------------------------------
                    
                } else {
                    if (!$(css_error_tips).length) {
                        oUpload.after(tmpl_error_tips);
                    }
                }
            }
        }).find('#sp-bg-upload').change(function () {
            $(this).parent().submit();
        });

        // change background position 
        oBgPos.change(function () {
            var bgPosX = $(this).val();
            oBg.css('background-position', bgPosX + ' top' );
            designStatus.hasBgPos = true;
        });

        // change background repeat
        oBgRepeat.change(function () {
            var isRepeat = $(this).is(':checked');
            oBg.css('background-repeat', isRepeat ? 'repeat' : 'no-repeat');
            designStatus.hasBgRepeat = true;
        });
		
        oBgShow.click(function () {
            var currBg;
            $(this).attr('class', 'sp-bg-show selected').
                next().removeClass('selected');
            // restore background
            if ($('img', this).hasClass('sys-bg')) {
                currBg = $('img', this).attr('src').replace('thumbnail', 'bg');
            } else {
                currBg = $('img', this).attr('src');
            }
            oInputAll.attr('disabled', '');
            oBg.css('background-image', 'url(' + currBg + ')');
        });

        // remove background-image
        oBgNone.click(function () {
            $(this).addClass('selected').
                prev().removeClass('selected');
            oBg.css('background-image', 'none');
            oInputAll.attr('disabled', 'disabled'); 
        });
        var color = $('.sp-nav').css('background-color');
        $('#sp_nav_transparent').click(function () {
       	  var ischecked = $('#sp_nav_transparent').is(':checked');
        	 if(ischecked)
			 {
			 	 $('.sp-nav').css('background-color','transparent');
			 	 $('.sp-logo').css('color','#000');
			 }
			 else
			 {
			 alert(color);
			 	 $('.sp-nav').css('background-color',color);
			 }
        
        });
		oFiexd.click(function () {
			 var ischecked = $('#sp-bg-fixed').is(':checked');
			 if(ischecked)
			 {
			 	var picsrc = $('.sp-bg-show img').attr('src');
			 	oBg.css('display','none'); 
			  	oBody.css('background-image', 'url(' + picsrc + ')');
			  	oBody.css('background-attachment', 'fixed');
			  
			 }
			 else
			 {
			 	oBg.css('display',''); 
			  	oBody.css('background-image', 'none');
			  	oBody.css('background-attachment', 'scorll');
			 }
		});
        // change system theme
        oThumbnail.click(function (e) {
            var id = $(this).attr('id').split('-')[1],
                bgUrl = '/pics/site/theme/' + id + '/bg.png',
                src = $(this).children().attr('src');
            // change style
            oCustomTheme.remove();
            oInitTheme.remove();
            oInputAll.attr('disabled', '');
            oThumbnail.children('.selected').removeClass();
            $('img', this).attr('class', 'selected');
            oBgShow.html('<img class="sys-bg" src="' + src + '" />').addClass('selected');
            oBgNone.removeClass('selected');

            // clear inline style
            $('.bg, .sp-nav, .nav-items li, .nav-items .on, .nav-items a, .top-nav-info a, #footer a, #theme-bg, #theme-banner, #theme-tag-bg, #theme-tag-link, #theme-link').removeAttr('style');
            oThemeCSS.attr('href', '/style/css/site/theme/' + id + '/core.css');
			
            // clear flag
            bgVer = '';
            designStatus.hasBgPos = false;
            designStatus.hasBgRepeat = false;
            designStatus.hasCustomColor = false;
            //----------------------------------
			$('#sp-bg-fixed').attr('checked',false);
			$('#sp_nav_transparent').attr('checked',false);
			$('#sp-body-fixed').css('display','none');
			oBg.css('display',''); 
	  		oBody.css('background-image', 'none');
	  		oBody.css('background-attachment', 'scorll');
	  		bgPic = '';
			//----------------------------------
            initInput();
        });

        oColorSelector.ColorPicker({
            onBeforeShow: function () {
                self = this;
                currId = $(self).attr('id');
                currColor = getBgColor($(self));
                $(this).ColorPickerSetColor(currColor);
            },
            onChange: function (hsb, hex, rgb) { 
                switch (currId) {
                    case 'theme-bg':
                    oBg.css('background-color', '#' + hex);
                    break;

                    case 'theme-banner':
                    $('.sp-nav').css('background', '#' + hex);
                    break;

                    case 'theme-tag-bg':
                    $('.nav-items li').css('background', '#' + hex);
                    $('.nav-items .on').css('background', '#fff');
                    break;

                    case 'theme-tag-link':
                    $('.nav-items a').css('color', '#' + hex);
                    break;
                    
                    case 'theme-link':
                    $('.top-nav-info a, #footer a').css('color', '#' + hex);
                    break;
                    
                    case 'theme-logo':
                  	$('.sp-logo a').css('color', '#' + hex);
                   	break;
                   
                }
                $(self).css('backgroundColor', '#' + hex);
                designStatus.hasCustomColor = true;
            }
        }).click(function (e) {
            e.preventDefault();
        });

        /* for tabs switch */
        oSwither.click(function (e) {
            e.preventDefault();
            var btnId = '#sp-' + $(this).attr('name');

            if (!$(this).hasClass(css_bn_active)) {
                $('.btn-large').removeClass(css_bn_active);
                $(this).addClass(css_bn_active);
                $('.mod-setting').hide();
                $(btnId).fadeIn();
                if (btnId === '#sp-bg-modify') {
                    oFormUpload.show();
                } else {
                    oFormUpload.hide();
                }
            }
        });

        /* save theme color */
        oSubmit.click(function (e) {
            e.preventDefault();
            var isCustom = oThumbnail.children('img').hasClass('selected'),
                sysThemeId = '',
                themeBg = '', themeBanner = '', themeTagBg = '', themeTagLink = '', themeLink = '',
                bgPos = '', bgRepeat = '', bgNone = '',themeLogo ='';
            // get system themeId
            if (isCustom) {
                sysThemeId = $('.sys-bg-list .selected').parent().attr('id').split('-')[1];
            }
            
            // get custom colors
            if (designStatus.hasCustomColor) {
                themeBg = getBgColor($('#theme-bg')),
                themeBanner = getBgColor($('#theme-banner')),
                themeTagBg = getBgColor($('#theme-tag-bg')),
                themeTagLink = getBgColor($('#theme-tag-link')),
                themeLink = getBgColor($('#theme-link')),
                themeLogo = getBgColor($('#theme-logo'))
            } else {
                themeBg = '', themeBanner = '',
                themeTagBg = '', themeTagLink = '', themeLink = '';
            }

            // get background position
            if (designStatus.hasBgPos) {
                bgPos = $('input[name="sp-bg"]:checked').val();
            }
            // get background repeat
            if (designStatus.hasBgRepeat) {
                bgRepeat = oBgRepeat.is(':checked') ? 'repeat' : 'no-repeat';
            }

            // background none
            if (oBgNone.hasClass('selected')) {
                bgNone = true;
            }

           var  bgFixed = $('#sp-bg-fixed').is(':checked') ? 'fixed' : 'scorll';
           var  sp_nav_transparent = $('#sp_nav_transparent').is(':checked') ? true : false;
            // save custom theme
            $.post_withck(
                '/admin_custom/' + siteId,
                {
                    'theme_id': sysThemeId,
                    'background_ver': bgVer,
                    'background_pic': bgPic,
                    'background_pos': bgPos,
                    'background_repeat': bgRepeat,
                    'background_cancel': bgNone,
                    'background_color': themeBg,
                    'banner_color': themeBanner,
                    'tab_color': themeTagBg,
                    'tab_link_color': themeTagLink,
                    'link_color': themeLink,
                    'bgfixed':bgFixed,
                    'sp_nav_transparent':sp_nav_transparent,
                    'themelogo':themeLogo
                },
                function () {
                
                  if (!$(css_top_tips).length) {
                            $('body').append(tmpl_top_tips);
                            $(css_top_tips).slideDown();
                            setTimeout(removeTips, 5000); 
                        }
               
                }
            );
        });

        // close top tips
        $('body').delegate(css_top_tips, 'click', removeTips);

        // cancel theme change
        oBgCancel.click(function (e) {
            e.preventDefault();
            location.href = '/' + siteId + '/admin/design';
        });
    });
</script>

            </div>
            <div class="aside">
                
			<div class="mod sp-tips">
			   
			</div>

            </div>
            <div class="extra">
                
            </div>
		</div>
        
 <?php $this->partial("/Tpl/Index/MoreAction/doFooter.htm");?>     
</body>
</html>